<template>
  <div class="app-container">
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="开票类型" prop="invoiceType">
          <el-select
            v-model="queryParams.invoiceType"
            placeholder="请选择开票类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.invoiceType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型" prop="bizType">
          <el-select
            v-model="queryParams.bizType"
            placeholder="请选择订单类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.sys_business"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="抬头类型" prop="invoiceTitleType">
          <el-select
            v-model="queryParams.invoiceTitleType"
            placeholder="请选择开票抬头类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.memberType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="开票方式" prop="invoiceWay">
          <el-select
            v-model="queryParams.invoiceWay"
            placeholder="请选择开票抬头类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.invoice_way"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开票状态" prop="invoiceStatus">
          <el-select
            v-model="queryParams.invoiceStatus"
            placeholder="请选择开票状态"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.sys_order_invoice"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开票时间" prop="time">
          <el-date-picker
            clearable
            size="small"
            v-model="queryParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择开票时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['invoice:invoice:export']"
          >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <el-table
        v-loading="loading"
        :data="invoiceList"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          label="订单类型"
          align="center"
          prop="bizType"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_business"
              :value="scope.row.bizType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="申请时间"
          align="center"
          prop="applyTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="开票金额"
          align="center"
          prop="invoiceAmount"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="抬头类型"
          align="center"
          prop="invoiceTitleType"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.memberType"
              :value="scope.row.invoiceTitleType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="开票类型"
          align="center"
          prop="invoiceType"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.invoiceType"
              :value="scope.row.invoiceType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="开票方式"
          align="center"
          prop="invoiceWay"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.invoice_way"
              :value="scope.row.invoiceWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="发票抬头"
          align="center"
          prop="invoiceTitle"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="公司税号"
          align="center"
          prop="dutyParagraph"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="开票状态"
          align="center"
          prop="invoiceStatus"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_order_invoice"
              :value="scope.row.invoiceStatus"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="开票时间"
          align="center"
          prop="invoiceTime"
          min-width="160"
          show-overflow-tooltip
        />

        <el-table-column
          label="操作"
          align="center"
          fixed="left"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row, true)"
              v-hasPermi="['invoice:invoice:edit']"
              v-if="scope.row.invoiceStatus == 1"
              >确认开票</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row, false)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改发票申请对话框 -->
    <el-dialog
      title="开票信息"
      :visible.sync="open"
      width="600px"
      append-to-body
    >
      <el-row>
        <el-col :span="24">
          <el-descriptions
            :column="2"
            border
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '300px' }"
          >
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">开票类型</template>
              <dict-tag
                :options="dict.type.invoiceType"
                :value="form.invoiceType"
              />
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">抬头类型</template>
              <dict-tag
                :options="dict.type.memberType"
                :value="form.invoiceTitleType"
              />
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">公司税号</template>
              {{ form.invoiceTitle || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">开票金额</template>
              {{ form.invoiceAmount || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label">开票方式</template>
              <dict-tag
                :options="dict.type.invoice_way"
                :value="form.invoiceWay"
              />
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  v-if="form.invoiceWay == 2">
              <template slot="label">收件人</template>
              {{ form.consignee || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  v-if="form.invoiceWay == 2">
              <template slot="label">收件地址</template>
              {{ form.consigneeAddress || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  v-if="form.invoiceWay == 2">
              <template slot="label">联系电话</template>
              {{ form.contactPhone || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  v-if="form.invoiceWay == 1">
              <template slot="label">电子邮箱</template>
              {{ form.email || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"
              v-if="form.invoiceWay == 1 && !edit && form.remark"
            >
              <template slot="label">开票备注</template>
              {{ form.remark || '--' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="68px"
        class="currForm"
      >
        <el-form-item label="开票备注" prop="remark" v-if="edit">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
            :maxlength="100"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 3 }"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item
          label="开票附件"
          prop="enclosure"
          v-if="form.invoiceStatus == 1 && edit"
        >
          <ImageUpload
            @on-success="enclosureSuccess"
            v-model="form.enclosure"
            :limit="3"
            @on-remove="enclosureRemove"
          />
        </el-form-item>
        <el-form-item
          label="开票附件"
          prop="enclosure"
          v-if="form.invoiceStatus == 2 && form.enclosure"
        >
          <template >
            <el-image
              :key="index"
              :src="getImgUrl(form.enclosure.split(','))"
              :preview-src-list="[getImgUrl(form.enclosure.split(','))]"
              style="width: 20%; margin-right: 15px"
              fit="contain"
            ></el-image>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm"
          v-if="form.invoiceStatus == 1 && edit"
          >确 定</el-button
        >
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listInvoice,
  getInvoice,
  delInvoice,
  addInvoice,
  updateInvoice,
  exportInvoice,
} from '@/api/invoice/invoice'

export default {
  name: 'Invoice',
  dicts: [
    'invoiceType',
    'memberType',
    'sys_order_invoice',
    'sys_business',
    'invoice_way',
  ],
  data() {
    return {
      edit: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 发票申请表格数据
      invoiceList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        invoiceType: null,
        invoiceAmount: null,
        invoiceTitle: null,
        bizNo: null,
        bizType: null,
        invoiceTitleType: null,
        dutyParagraph: null,
        content: null,
        invoiceWay: null,
        email: null,
        time: null,
        startTime: null,
        endTime: null,
        consignee: null,
        consigneeAddress: null,
        contactPhone: null,
        invoiceStatus: null,
        applyTime: null,
        invoiceTime: null,
        deptId: null,
        tenantId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询发票申请列表 */
    getList() {
      this.loading = true
      listInvoice(this.queryParams).then((response) => {
        this.invoiceList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        invoiceId: null,
        invoiceType: null,
        invoiceAmount: null,
        invoiceTitle: null,
        bizNo: null,
        bizType: null,
        invoiceTitleType: null,
        dutyParagraph: null,
        content: null,
        invoiceWay: null,
        email: null,
        consignee: null,
        consigneeAddress: null,
        contactPhone: null,
        invoiceStatus: 0,
        applyTime: null,
        invoiceTime: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        deptId: null,
        tenantId: null,
      }
      this.resetForm('form')
    },
    // 删除门店图片
    enclosureRemove(file) {
      this.form.enclosure = null
    },
    // 上传成功门店回调
    enclosureSuccess(res) {
      this.form.enclosure = res.fileName
      this.$refs['form'].validateField('enclosure')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.time) {
        this.queryParams.startTime = this.parseTime(
          this.queryParams.time[0],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.queryParams.endTime = this.parseTime(
          this.queryParams.time[1],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
      }
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.time = ''
      this.queryParams.startTime = null
      this.queryParams.endTime = null
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.invoiceId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加发票申请'
    },
    /** 修改按钮操作 */
    handleUpdate(row, edit) {
      this.reset()
      this.edit = edit
      const invoiceId = row.invoiceId || this.ids
      getInvoice(invoiceId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = ''
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateInvoice(this.form).then((response) => {
            this.$modal.msgSuccess('开票成功')
            this.open = false
            this.getList()
          })
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const invoiceIds = row.invoiceId || this.ids
      this.$modal
        .confirm('是否确认删除发票申请编号为"' + invoiceIds + '"的数据项？')
        .then(function () {
          return delInvoice(invoiceIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有发票申请数据项？')
        .then(() => {
          this.exportLoading = true
          return exportInvoice(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
}
</script>
<style scoped="scoped">
.currForm .el-form-item {
  margin-top: 16px;
  margin-bottom: 5px !important;
}
</style>
